<template>
   <el-cascader  :options="province" :value="value" @active-item-change="handleItemChange" @change="handleChange">
   </el-cascader>
</template>
<script>
  import { fetchAreas } from '@/api/data'
  export default {
    name: 'jw-area',
    data() {
      return {
        province: [],
        value: []
      }
    },
    props: {
      // 几级
      level: {
        default: 3,
        type: Number
      },
      // 初始值
      init: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      handleChange(ids) {
        this.$emit('input', ids)
      },
      handleInit(ids) {
        const length = ids.length
        if (length === 1 && this.level === 1) {
          this.value = ids
          return true
        } else if (length === 2 && this.level === 2) {
          const indexOne = this.province.findIndex(item => {
            return item.value === ids[0]
          })
          if (this.province[indexOne].child.length <= 0) {
            fetchAreas(ids[0]).then(res => {
              this.province[indexOne].children = this.formatter(res.areas)
              this.value = ids
            })
          }
        } else if (length === 3 && this.level === 3) {
          const indexOne = this.province.findIndex(item => {
            return item.value === ids[0]
          })
          if (this.province[indexOne].children.length <= 0) {
            fetchAreas(ids[0]).then(res => {
              this.province[indexOne].children = this.formatter(res.areas)
              const indexTwo = this.province[indexOne].children.findIndex(item => {
                return item.value === ids[1]
              })
              fetchAreas(ids[1]).then(res => {
                this.province[indexOne].children[indexTwo].children = this.formatter(res.areas)
                this.value = ids
              })
            })
          } else {
            const indexTwo = this.province[indexOne].children.findIndex(item => {
              return item.value === ids[1]
            })
            if (this.province[indexOne].children[indexTwo].children.length <= 0) {
              fetchAreas(ids[1]).then(res => {
                this.province[indexOne].children[indexTwo].children = this.formatter(res.areas)
                this.value = ids
              })
            }
          }
        }
      },
      handleItemChange(ids) {
        const length = ids.length
        let indexOne
        let indexTwo
        if (length === 1) {
          indexOne = this.province.findIndex(item => {
            return item.value === ids[0]
          })
          if (this.province[indexOne].children.length <= 0) {
            fetchAreas(ids[0]).then(res => {
              this.province[indexOne].children = this.formatter(res.areas)
            })
          }
        }
        if (length >= 2) {
          indexOne = this.province.findIndex(item => {
            return item.value === ids[0]
          })
          if (this.province[indexOne].children.length === 0) {
            fetchAreas(ids[0]).then(res => {
              this.province[indexOne].children = this.formatter(res.areas)
              indexTwo = this.province[indexOne].children.findIndex(item => {
                return item.value === ids[1]
              })
              fetchAreas(ids[1]).then(res => {
                this.province[indexOne].children[indexTwo].children = this.formatter(res.areas)
              })
            })
          } else {
            indexTwo = this.province[indexOne].children.findIndex(item => {
              return item.value === ids[1]
            })
            fetchAreas(ids[1]).then(res => {
              this.province[indexOne].children[indexTwo].children = this.formatter(res.areas)
            })
          }
        }
      },
      formatter(areas) {
        const data = []
        if (areas[0] && areas[0].province) {
          for (const { provinceid, province } of areas) {
            const item = {
              value: parseInt(provinceid),
              label: province
            }
            if (this.level !== 1) {
              item.children = []
            }
            data.push(item)
          }
        }
        if (areas[0] && areas[0].city) {
          for (const { cityid, city } of areas) {
            const item = {
              value: parseInt(cityid),
              label: city
            }
            if (this.level !== 2) {
              item.children = []
            }
            data.push(item)
          }
        }
        if (areas[0] && areas[0].area) {
          for (const { areaid, area } of areas) {
            const item = {
              value: parseInt(areaid),
              label: area
            }
            data.push(item)
          }
        }
        return data
      }
    },
    watch: {
      init(val) {
        this.handleInit(val)
      }
    },
    created() {
      fetchAreas().then(res => {
        this.province = this.formatter(res.areas)
        if (this.init.length > 0) {
          this.handleInit(this.init)
        }
      })
    }
  }
</script>

<style scoped>

</style>
